.helpTemplate {
  min-height:800px;
  margin-bottom:30px;
  .helpCenterBox {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .helpCenterTitle {
      width: 100%;
      padding: 12px 0 20px;
      background: transparent;
      overflow: visible;
      .helpTitleUl {
        justify-content: space-around;
        align-items: center;
        overflow: visible;
      }
      .helpTitleItem {
        width: 20%;
        text-align: center;
        overflow: visible;
        a {
          display: inline-block;
          position: relative;
          overflow: visible;
          p {
            font-family: "Microsoft YaHei";
            font-size: 14px;
            color: #262732;
            line-height: 16px;
            margin-top: 4px;
          }
        }
        &.on{
          a::after{
              content: '';
              width: 0;
              height: 0;
              border: 10px solid transparent;
              border-top:10px solid #f9f9f9;
              position: absolute;
              left: 50%;
              bottom:-44px;
              transform: translateX(-50%);
            }
        }
      }
    }
    .bannerTitle {
      background: #262732;
      height: 66px;
      line-height: 66px;
      margin:0 4px;
      text-align: center;
      font-family: "Microsoft YaHei";
      font-size: 18px;
      color: #FFFFFF;
      border-radius: 2px;
    }
    .helpCenterInfoBox {

      .helpInfoItem {
        margin: 4px;
        background: #FFFFFF;
        padding: 18px 30px;
        .helpInfoTitle {
          P {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            line-height: 16px;
            color: #727486;
            &:first-child{
              font-family: MicrosoftYaHei;
              font-size: 18px;
              line-height: 20px;
              color: #262732;
              margin-bottom:12px;
            }
          }
        }
        .helpItemContent{
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #727486;
          line-height: 20px;
          display: none;
          margin-top: 24px;
        }
        &.on{
          box-shadow: 0 5px 14px 0 rgba(0,0,0,0.10);
        }
      }
    }
  }
  .questionIcon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../../assets/images/helpCenter/question.png") center no-repeat;
    background-size: auto 100%;
    &.on {
      background: url("../../assets/images/helpCenter/questionOn.png") center no-repeat;
      background-size: auto 100%;
    }
  }
  .helpWithdrawIcon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../../assets/images/helpCenter/helpWithdraw.png") center no-repeat;
    background-size: auto 100%;
    &.on {
      background: url("../../assets/images/helpCenter/helpWithdrawOn.png") center no-repeat;
      background-size: auto 100%;
    }
  }
  .newGuidIcon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../../assets/images/helpCenter/new_guide.png") center no-repeat;
    background-size: auto 100%;
    &.on {
      background: url("../../assets/images/helpCenter/new_guide_on.png") center no-repeat;
      background-size: auto 100%;
    }
  }
  .helpTopupIcon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../../assets/images/helpCenter/helpTopup.png") center no-repeat;
    background-size: auto 100%;
    &.on {
      background: url("../../assets/images/helpCenter/helpTopupOn.png") center no-repeat;
      background-size: auto 100%;
    }
  }
  .rulesIcon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: url("../../assets/images/helpCenter/rules.png") center no-repeat;
    background-size: auto 100%;
    &.on {
      background: url("../../assets/images/helpCenter/rulesOn.png") center no-repeat;
      background-size: auto 100%;
    }
  }
}